<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Geolocalip</title>
     <?php
    include 'func.php';
//	creation_tableau();
  	$test=creation_tableau();
    echo '<script language="javascript"> var bigtab=new Array()</script>'; 
  	$taille = count($test);
  	for($i=0;$i<$taille;$i++){
    		 echo '<script language="javascript"> 
    bigtab.push("'.$test[$i].'");
    </script>'; 
  	}
    ?>
      <script src="http://www.heatmapapi.com/javascript/HeatmapAPI.aspx?k=5c7aa16d-2f2b-4115-8196-6b8766c0e095" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAIYgph40dOoV9ugnblGwf2xSlkfufrb1kJOt_dgVv8nb2l9bhUBRrvJIVYxevOW3nxbSsVCiOd7E5Kw" 
       type="text/javascript"></script>
        <script src="http://www.heatmapapi.com/javascript/HeatmapAPIGoogle.js" type="text/javascript"></script>
    <script type="text/javascript">
    var posxy = "(0.0, 0.0)";
     var geocoder = null; 		// si l'on veut untiliser le geocoder faut définir une deuxième variable

    var iconBlue = new GIcon(); 
    iconBlue.image = 'images/mm_20_blue.png';
    iconBlue.shadow = 'images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'images/mm_20_red.png';
    iconRed.shadow = 'images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);
    
    var iconOrange = new GIcon(); 
    iconOrange.image = 'images/mm_20_orange.png';
    iconOrange.shadow = 'images/mm_20_shadow.png';
    iconOrange.iconSize = new GSize(12, 20);
    iconOrange.shadowSize = new GSize(22, 20);
    iconOrange.iconAnchor = new GPoint(6, 20);
    iconOrange.infoWindowAnchor = new GPoint(5, 1);

    var iconYellow = new GIcon(); 
    iconYellow.image = 'images/mm_20_yellow.png';
    iconYellow.shadow = 'images/mm_20_shadow.png';
    iconYellow.iconSize = new GSize(12, 20);
    iconYellow.shadowSize = new GSize(22, 20);
    iconYellow.iconAnchor = new GPoint(6, 20);
    iconYellow.infoWindowAnchor = new GPoint(5, 1);
    
    var iconGreen = new GIcon(); 
    iconGreen.image = 'images/mm_20_green.png';
    iconGreen.shadow = 'images/mm_20_shadow.png';
    iconGreen.iconSize = new GSize(12, 20);
    iconGreen.shadowSize = new GSize(22, 20);
    iconGreen.iconAnchor = new GPoint(6, 20);
    iconGreen.infoWindowAnchor = new GPoint(5, 1);
    
    var iconPurple = new GIcon(); 
    iconPurple.image = 'images/mm_20_purple.png';
    iconPurple.shadow = 'images/mm_20_shadow.png';
    iconPurple.iconSize = new GSize(12, 20);
    iconPurple.shadowSize = new GSize(22, 20);
    iconPurple.iconAnchor = new GPoint(6, 20);
    iconPurple.infoWindowAnchor = new GPoint(5, 1);
    
    
    
    var customIcons = [];
    customIcons["annee"] = iconBlue;
    customIcons["jour"] = iconRed;
	customIcons["semaine"] = iconOrange;
	customIcons["mois"] = iconYellow;
	customIcons["six_mois"] = iconGreen;
	customIcons["alltime"] = iconPurple;
	 
	function array_search(what, where){
		var index_du_tableau=-1
		for(elt in where){index_du_tableau++;
			 if (where[elt]==what){return index_du_tableau}
						 }
		index_du_tableau=-1;
		return index_du_tableau
		} 
	 
	          nombrevisite=new Array(); 
    
	function load(category) {
		// a changer l'emplacement.
		///////////////
		
		
		  if (GBrowserIsCompatible())
         {
         	
         	
            	posxy = posxy.toString();
            	taille_posxy = posxy.length;
            	var virgule = posxy.indexOf(",");
            	var x_load = posxy.substring(1,virgule);
       	        var y_load = posxy.substring((virgule+2),(taille_posxy-1));

         	
         	
         	
          m = new GMap2(document.getElementById("heatmap"));
          m.addControl(new GLargeMapControl());
          m.addControl(new GMapTypeControl());
          m.setCenter(new GLatLng(x_load,y_load), 5);
          initHeatmap();
         }
         else{
          alert('Your Internet browser is not compatible with this website.');}
            function initHeatmap()
        {
            // Heatmap Scripts
            try
            {
                var myHM = new GEOHeatmap();
                myHM.Init(400, 300);
                myHM.SetData(bigtab);
                myHM.SetBoost(1);
                myHM.SetDecay(0);
                var preUrl = myHM.GetURL();
                // Now render in our Google Map
                var heatmapOverlay = new HMGoogleOverlay(preUrl);
                m.addOverlay(heatmapOverlay);     
            }
            catch(e)
            {
            	
             alert(e.Message);
            }
        }
		
		
		///////////////
		nombrevisite.length=0
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GOverviewMapControl());
		posxy = posxy.toString();
		//alert(posxy);
       	taille_posxy = posxy.length;
        var virgule = posxy.indexOf(",");
        var x_load = posxy.substring(1,virgule);
       	var y_load = posxy.substring((virgule+2),(taille_posxy-1));
        map.setCenter(new GLatLng(x_load,y_load), 5);
        GDownloadUrl("phpsqlajax_genxml2.php", function(data) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        var myTs = new Date();
        for (var i = 0; i < markers.length; i++) {
			 var ville = markers[i].getAttribute("ville");
			 if(array_search(ville,nombrevisite)==-1){
			nombrevisite.push(ville);
			nombrevisite[ville]=1;	
			}else{
			nombrevisite[ville]+=1
			}
			}
          for (var i = 0; i < markers.length; i++) {  // boucle pour la creation des markers
            var name = markers[i].getAttribute("name");
            var date = markers[i].getAttribute("date");
            var type = markers[i].getAttribute("type");
             var ville = markers[i].getAttribute("ville");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, date, type, ville);
            if(category=="jour"){
          	  if(date > (timestamp-jour)) //le if pour afficher en fonction de la check box
         	   map.addOverlay(marker);
			}else if(category=="semaine"){
				 if(date > (timestamp-semaine)) //le if pour afficher en fonction de la check box
         	   map.addOverlay(marker);
			}else if(category=="un_mois"){
				 if(date > (timestamp-un_mois)) //le if pour afficher en fonction de la check box
         	   map.addOverlay(marker);
			}else if(category=="six_mois"){
				 if(date > (timestamp-six_mois)) //le if pour afficher en fonction de la check box
         	   map.addOverlay(marker);
			}else if(category=="annee"){
				 if(date > (timestamp-annee)) //le if pour afficher en fonction de la check box
         	   map.addOverlay(marker);
			}else if(category=="plus"){
         	   map.addOverlay(marker);
			}
            
          }
        });
      }
    }

var d = new Date();
var timestamp = parseInt((d.getTime())/1000);
var jour = 86400;
var semaine = 604800;
var un_mois = 2592000; 
var six_mois = 15768000;
var annee = 31536000;

    function createMarker(point, name, date, type, ville) {
    	
    	if(date > (timestamp-jour)){
    		 var marker = new GMarker(point, customIcons["jour"]);
    	}else if(date > timestamp-semaine){
    		 var marker = new GMarker(point, customIcons["semaine"]);
    	}else if(date > timestamp-un_mois){
    		 var marker = new GMarker(point, customIcons["mois"]);
    	}else if(date > timestamp-six_mois){
    		 var marker = new GMarker(point, customIcons["six_mois"]);
    	}else if(date > timestamp-annee){
    		 var marker = new GMarker(point, customIcons["annee"]);
    	}else{
      var marker = new GMarker(point, customIcons["alltime"]);
    	}
   	var toto=date+"000";
    	var myDate = new Date(parseInt(toto));
    	var jour_semaine = new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");
    	var mois = new Array("janvier","fevrier","mars","avril","mai","juin","juillet", "aout", "septembre", "octobre", "novembre", "decembre");
      var html = "Ville : "+ ville +"<br/>Pays : "+type+"<br/> Nombre de visite "+ nombrevisite[ville] +"<br/>Adresse IP : " + name + "<br/> Visite faite le " + jour_semaine[myDate.getDay()]+" "+myDate.getDate()+" "+ mois[myDate.getMonth()] +" à " + myDate.getHours()+"h"+ myDate.getMinutes();
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    
    function test(){
    	document.getElementById("jour").checked=false;
    	document.getElementById("semaine").checked=false;
    	document.getElementById("mois").checked=false;
    	document.getElementById("6mois").checked=false;
    	document.getElementById("an").checked=false;
    	document.getElementById("plus").checked=false;
		m=document.forms.e.dmc.value; 

	    if(GBrowserIsCompatible()) {
		
			map = new GMap2(document.getElementById("map"));
			        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
			
			geocoder = new GClientGeocoder();						// initialisation du geocoder
			
			address = m;
			
			if (geocoder) {
				geocoder.getLatLng(address, function(pointeur){
					if (!pointeur) {
						alert(address + " not found");
					}
					else {						
						posxy = pointeur;
						map.setCenter(pointeur, 5); 				// "pointeur" contient la reponse du geocoder
						var marker = new GMarker(pointeur);
					}
				});
			}
		}
    }
    
    function afficheId(baliseId)
  {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
  }
  function cacheId(baliseId)
  {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
  }
    
  </script>
  </head>

  <body onload="load()">
   <table border=0>
   	<tr>
   <div id="titre"><h1>Geolocalip</h1></div>
   		</tr>
      <tr>
          	 <td width = 150 valign="top">
    <div id="colonne" style="right"> 
    
   	<br />
	<br />
    Pays :
    <br />
	<br />
		<div id="formulaire">
		<form name="e"> 
		<input type="text" name="dmc" size="20"> 
		<input type="button" name="bout" value="Rechercher" onClick="test()"> 
		</form> 
		</div>
    <br />
    <br />
	<HR>
	<br />
	<div>
    Visites datant de :
    <br />
    <br />
    <form ame="form1" action="#">
    <input type="RADIO" NAME="radio_button" id="jour" onclick="boxclick(this,'jour')" /><IMG src="images/mm_20_red.png">un jour <br /><br />
    <input type="RADIO" NAME="radio_button" id="semaine" onclick="boxclick(this,'semaine')" /><IMG src="images/mm_20_orange.png">une semaine <br /><br />
    <input type="RADIO" NAME="radio_button" id="mois" onclick="boxclick(this,'un_mois')" /><IMG src="images/mm_20_yellow.png">un mois<br /><br />
    <input type="RADIO" NAME="radio_button" id="6mois" onclick="boxclick(this,'six_mois')" /><IMG src="images/mm_20_green.png">six mois<br /><br />
    <input type="RADIO" NAME="radio_button" id="an" onclick="boxclick(this,'annee')" /><IMG src="images/mm_20_blue.png">un an<br /><br />
    <input type="RADIO" NAME="radio_button" id="plus" onclick="boxclick(this,'plus')" /><IMG src="images/mm_20_purple.png">plus d'un an<br /><br />
    
    </form> 
    </div>
    </div>
   <a href="javascript:afficheId('contenu')">heatmap</a>
    </td>
        <td>
    <div id="map" style="width: 550px; height: 450px"></div>
       	</td> 
       	<td>
       	 <div id ="contenu"  style="float:left;visibility:hidden;">
       	  <a href="javascript:cacheId('contenu');">Fermer</a>
    <div id="heatmap" style="width: 550px; height: 450px"></div>
    </div>

       	</td>
    </tr>
    </table>
    
    <script type="text/javascript">
 function boxclick(box,category) {
 	
        if (box.checked) {
		var toto=category;
        load(toto);
        } else {
          hide(category);
        }
 }
        </script>
    
    
  </body>
</html>